<template>
    <div class="lesson-box">
        <el-row :gutter="12">
            <el-col :span="4">
                <el-card class="box-card">
                    <template #header>
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">资源分类</div>
                        </div>
                    </template>
                    <div class="item-box">
                        <div class="text-item" v-for="o in 12" :key="o">通信工程</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="20">
                <el-card class="box-card">
                    <div class="question-box">
                        <div class="action-buttons">
                            <div class="left-buttons">
                                <el-input v-model="input" placeholder="请输入分类名" />
                                <el-button type="primary" class="btns">
                                    <el-icon><Search /></el-icon>
                                    <span>搜索</span>
                                </el-button>
                            </div>
                            <div class="left-buttons">
                                <el-button type="primary" class="btns" @click="edit">
                                    <img src="@/assets/add-point.png" alt="">
                                    <span>新增</span>
                                </el-button>
                                <el-button class="danger">
                                    <img src="@/assets/dele.png" alt="">
                                    <span>删除</span>
                                </el-button>
                            </div>
                        </div>
                        <div class="table-container">
                            <el-table ref="multipleTableRef" :data="materials" style="width: 100%" @selection-change="handleSelectionChange" >
                                <el-table-column type="selection" />
                                <el-table-column label="分类名称">
                                    <template #default="scope">{{ scope.row.name }}</template>
                                </el-table-column>
                                <el-table-column property="name" label="操作" align="center" width="100">
                                    <template #default="scope">
                                        <div class="material-operations">
                                            <el-link type="primary"  @click="edit(scope.row)" :underline="false">编辑</el-link>
                                            <el-link type="danger"  @click="previewMaterial(scope.row)" :underline="false">删除</el-link>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pages">
                                <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    
    <el-dialog v-model="dialogVisable" title="Tips" width="40%" top="25vh">
        <template #header>
            <div class="my-header">
                <span></span>
            </div>
        </template>
        <div class="major-dialog">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">分类名称</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="textarea" type="input" placeholder="请输入分类名称" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisable = false">取消</el-button>
                <el-button type="primary" @click="dialogVisable = false">完成</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref } from 'vue'
    import { Search } from '@element-plus/icons-vue'
    const materials = ref([
        { id: 1, name: '第一章 产品结构设计基础.pdf', type: 'pdf', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false }
    ]);
    const dialogVisable = ref(false);
    const edit = () => {
        dialogVisable.value = !dialogVisable.value;
    }
</script>
<style scoped>
    :deep(.el-card__header){padding: 0;}
    :deep(.el-row){ width: 100%;display: flex;flex-direction: row;justify-content: space-between; }
    :deep(.el-card__body){padding: 0;}
    :deep(.el-input){height: 35px;}
    :deep(.inputs .el-input){width: 100%;}
    :deep(.el-button--primary){background: #1465E1;}
    .lesson-box{background: #fff;height: calc(85vh + 20px);width: 100%;}
    .class-title{display: flex;flex-direction: row;align-items: center;height: 45px;}
    .class-title .left{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .class-title .right{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;}
    .text-item{cursor: pointer;padding: 10px 0 10px 15px;text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .question-box{height: 85vh;margin-right: 20px;}
    .item-box{height: calc(85vh - 45px);}
    .action-buttons { display: flex; justify-content: space-between; padding: 10px 15px 20px 15px; border-bottom: 1px solid #eaeef2; }
    .left-buttons { display: flex; gap: 12px; height: 35px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .danger{color: #D4424A;height: 35px;border: 1px solid #D4424A;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .right-buttons { display: flex; gap: 12px; }
    .material-operations { display: flex; justify-content: end; gap: 12px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;position: absolute;bottom: 20px;right: 20px;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 10px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
</style>